
export default function Demo5() {
    const formatTime = (date) => {
        // yyyy-MM-dd hh:mm:ss
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    }
    return (
        <>
            <h1>点击事件</h1>
            <ToolBar
                PlayVideo={() => alert('Play Video')}
                UploadImage={() => alert('Upload Image')}
                ShowTime={() => alert(formatTime(new Date()))}
            ></ToolBar>
        </>
    )
}

function ToolBar({PlayVideo, UploadImage, ShowTime}) {
    return (
        <section>
            <Button onClick={PlayVideo}>
                PlayVideo
            </Button>
            <Button onClick={UploadImage}>
                UploadImage
            </Button>
            <Button onClick={ShowTime}>
                ShowTime
            </Button>
        </section>
    )
}
function Button({onClick, children}) {
    return (
        <button onClick={onClick}>
            {children}
        </button>
    )
}
